{% extends 'back/index.html' %}

{% block content %}
    <div class="rt_content">
        <div class="page_title">
            <h2 class="fl">订单详情</h2>
            <a href="{% url 'order_list' %}" class="fr top_rt_btn">返回订单列表</a>
        </div>
        <table class="table">
            <tr>
                <td>收件人：{{ order.name }}</td>
                <td>联系电话：{{ order.phone }}</td>
                <td>收件地址：{{ order.address2 }}</td>
                <td>订单编号：{{ order_id }}</td>
            </tr>
            <tr>
                <td>下单时间：{{ order.create_time|date:"Y-m-d H:i:s" }}</td>
                <td>付款时间：{{ order.create_time|date:"Y-m-d H:i:s" }}</td>
                <td>确认时间：{{ order.create_time|date:"Y-m-d H:i:s" }}</td>
                <td>评价时间：- -</td>
            </tr>
            <tr>
                <td>订单状态：<a>已付款，待发货</a></td>
                <td colspan="3">订单备注：
                    <mark>{{ order.note }}</mark>
                </td>
            </tr>
        </table>
        <table class="table">
            <tr>
                <td class="center">产品图片</td>
                <td class="center">产品名称</td>
                <td class="center">型号</td>
                <td class="center">单价</td>
                <td class="center">数量</td>
                <td class="center"><strong>总价</strong></td>
                <td class="center">是否包邮</td>
            </tr>
            {% for p in products %}
                <tr>
                    <td class="center"><img src="{{ p.sku_image }}" width="50" height="50"/></td>
                    <td class="center">{{ p.sku_name }}</td>
                    <td class="center">{{ p.sku.type }}</td>
                    <td class="center"><strong>$ {{ p.unit_price }}</strong></td>
                    <td class="center"><strong>{{ p.quantity }}</strong></td>
                    <td class="center"><strong>$ {% widthratio p.unit_price 1 p.quantity %}</strong></td>
                    {# widthratio 实现模版的乘法 将第二个参数设置为1 即可 #}
                    <td class="center">包邮</td>
                </tr>
            {% endfor %}
        </table>

        <aside class="mtb" style="text-align:right;">
            <input type="button" value="打印订单" class="group_btn"/>
            <button class="group_btn" id="modifyOrder">修改订单</button>
            <a href="{% url 'order_list' %}"><input type="button" value="确认订单" class="group_btn"/></a>
            <input type="button" value="取消订单" class="group_btn"/>
            <button class="group_btn" id="showPopTxt">配货</button>
        </aside>

        <!--配货弹出框！-->
        <script>
            $(document).ready(function () {
                //弹出文本性提示框
                $("#showPopTxt").click(function () {
                    $(".pop_bg").fadeIn();
                });
                //弹出：确认按钮
                $(".trueBtn1").click(function () {
                    $(".pop_bg").fadeOut();
                });
                //弹出：取消或关闭按钮
                $(".falseBtn1").click(function () {
                    $(".pop_bg").fadeOut();
                });
            });
        </script>

        <section class="pop_bg">
            <div class="pop_cont">
                <!--title-->
                <h3>配货信息</h3>
                <!--content-->
                <div class="pop_cont_input">
                    <ul>
                        <li>
                            <span>订单编号</span>
                            <input type="text" class="textbox" value="{{ order_id }}"/>
                        </li>
                        <li>
                            <span>收货地址</span>
                            <input type="text" class="textbox" value="{{ order.address2 }}"/>
                        </li>
                        <li>
                            <span class="ttl">配送方式</span>
                            <select class="select" id="express">
                                <option>选择物流公司</option>
                                <option value="顺丰">顺丰</option>
                                <option value="中通">中通</option>
                                <option value="其他">其他</option>
                            </select>
                        </li>
                    </ul>
                </div>
                <!--以pop_cont_text分界-->
                <div class="pop_cont_text">
                    请确认配货信息！
                </div>
                <!--bottom:operate->button-->
                <div class="btm_btn">
                    <input type="button" value="确认" class="input_btn trueBtn1"/>
                    <input type="button" value="关闭" class="input_btn falseBtn1"/>
                </div>
            </div>
        </section>

        <section class="pop_mo" id="mo">
            <div class="pop_cont">
                <!--title-->
                <h3>订单信息</h3>
                <!--content-->
                <div class="pop_cont_input">
                    <ul>
                        {% for p in products %}
                        <li>
                            <span>商品名称</span>
                            <input type="text" class="textbox" name="pname" required="required" value="{{ p.sku_name }}"/>
                        </li>
                        <li>
                            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;价格</span>
                            <input type="text" class="textbox" name="price" required="required" value="{{ p.unit_price }}"/>
                        </li>
                        {% endfor %}
{#                        <li>#}
{#                            <span>商品型号</span>#}
{#                            <input type="text" class="textbox" name="name" required="required" value="asdasd"/>#}
{#                        </li>#}
{#                        <li>#}
{#                            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数量</span>#}
{#                            <input type="text" class="textbox" name="name" required="required" value="2"/>#}
{#                        </li>#}
                        <li>
                            <span>&nbsp;&nbsp;&nbsp;&nbsp;收件人</span>
                            <input type="text" class="textbox" name="name1" required="required" value="{{ order.name }}"/>
                        </li>
                        <li>
                            <span>联系电话</span>
                            <input type="text" class="textbox" name="phone1" required="required" value="{{ order.phone }}"/>
                        </li>
                        <li>
                            <span>收件地址</span>
                            <input type="text" class="textbox" name="address1" required="required"
                                   value="{{ order.address2 }}"/>
                        </li>
{#                        <li>#}
{#                            <span class="ttl">配送方式</span>#}
{#                            <select class="select" id="express">#}
{#                                <option>选择物流公司</option>#}
{#                                <option value="顺丰">顺丰</option>#}
{#                                <option value="中通">中通</option>#}
{#                                <option value="其他">其他</option>#}
{#                            </select>#}
{#                        </li>#}
                    </ul>
                </div>
                <!--bottom:operate->button-->
                <div class="mo_btn">
                    <button type="button" class="link_btn" onclick="modify()">修改</button>
                    <button type="button" class="link_btn falseBtn2">退出</button>
                    <button type="submit" class="link_btn" onclick="read()">确认</button>
                </div>
            </div>
        </section>
        <!--结束：弹出框效果-->


        <!--修改订单弹出框-->
        <script>
            $(document).ready(function () {
                //弹出文本性提示框
                $("#modifyOrder").click(function () {
                    $('#express').val('顺丰');
                    $(".pop_mo").fadeIn();
                });
                //弹出：取消或关闭按钮
                $(".falseBtn2").click(function () {
                    $(".pop_mo").fadeOut();
                });
            });
        </script>
    </div>

    <script type="text/javascript">
        jQuery(document).ready(read());

        function read() {
            $("#mo input").attr("disabled", "disabled");
            $("#mo select").attr("disabled", "disabled");
        }

        function modify() {
            $("#mo input").removeAttr("disabled");
            $("#mo select").removeAttr("disabled");
            // $(".hide").removeClass("hide")
        }

        (function ($) {
            $(window).load(function () {
                $('#drop2').collapse('show');
                $('#2-2').addClass('active');
            });
        })(jQuery);
    </script>

{% endblock %}
